<template>
  <div>
    <h4>游戏咨询详情-query</h4>
    <p>{{ detail.title }}</p>
    <!-- <p>{{ detail.content }}</p> -->
    <div v-html="detail.content"></div>
    <hr />
    <router-link
      :to="{
        name: 'detail',
        query: {
          id: detail.prev ? detail.prev.id : '',
        },
      }"
      >上一条</router-link
    >
    <!-- ?. ES6 的链式判断运算符,解决对象或者数组在取值时,没有值导致程序报错 -->
    <router-link
      :to="{
        name: 'detail',
        query: {
          id: detail?.next?.id ?? '',
        },
      }"
      >下一条</router-link
    >
  </div>
</template>

<script>
import $ from "jquery";
export default {
  data() {
    return {
      detail: {},
    };
  },
  methods: {
    loadGameDetail(id) {
      $.get(
        "http://139.196.82.122:8080/api/v1/index/article?id=" + id,
        (result) => {
          // 判断
          // console.log(result);
          this.detail = result.data;
        }
      );
    },
  },
  beforeRouteUpdate(to, from, next) {
    this.loadGameDetail(to.query.id);
    next(true);
  },
  created() {
    // 打印当前正在访问的路由的信息配置对象(激活路由信息对象)
    console.log(this.$route);
    // 通过路由跳转，传递的解码分割后的参数数据对象
    console.log(this.$route.query);
    console.log("id:", this.$route.query.id);

    this.loadGameDetail(this.$route.query.id);
  },
};
</script>
